<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Image-map with Navigation</title>
</head>
<body>
<div style="text-align:center;">
    <h1>Image-map with Navigation</h1>

    <p>Clicking on a hotspot in the image-map below will navigate to another page in the book.</p>

    <div style="text-align:center; margin-left:auto; margin-right:auto;">
        <img id="Devices_image" src="images/devices2.jpg" usemap="#Device_Map" width="479" height="312"
             alt=""/>
        <map id="Device_Map">
            <area shape="rect" coords="55,101,129,284" href="ImageMap_target.xhtml#TheReaderPlus" alt="Touch" title="Touch"/>
            <area shape="rect" coords="153,23,270,279" href="ImageMap_target.xhtml#TheReaderPlusPlus" title="HDPlus"/>
            <area shape="rect" coords="273,79,395,273" href="ImageMap_target.xhtml#TheReader"/>
        </map>
    </div>
</div>

</body>
</html>